import Strings from '@/i18n';
import {
  View,
  showToast,
  Image,
  Text,
  getStatisticsRangDay,
  getStatisticsRangHour,
  getStatisticsRangMonth,
  router,
} from '@ray-js/ray';
import React, { useEffect, useState, memo } from 'react';
import dayjs from 'dayjs';
import { AUTO_FILL_TYPE } from '@/pages/curve/hooks/useStatRange';
import { useDevId } from '@ray-js/panel-sdk/lib/hooks';
import { useThrottleFn } from 'ahooks';
import res from '@/res/image';
import styles from './index.module.less';

export const InfoCom = memo((props: { onClick?: () => void }) => {
  const { deviceId } = useDevId();

  const today = dayjs().format('YYYYMMDD');

  const yesterday = dayjs().subtract(1, 'day').format('YYYYMMDD');

  const [list, setList] = useState([
    {
      title: Strings.getLang('todayCatToiletTime'),
      value: 0,
      unit: Strings.getLang('times'),
      campare: 0,
    },
    {
      title: Strings.getLang('todayCatAvaSec'),
      value: 0,
      unit: Strings.getLang('Sec'),
      campare: 0,
    },
  ]);

  const getvisit = async () => {
    const res = await getStatisticsRangDay({
      dpId: '7',
      devId: deviceId,
      startDay: yesterday,
      endDay: today,
      type: 'sum',
      auto: AUTO_FILL_TYPE.FILL_ZERO,
    });

    return res;
  };

  const getTime = async () => {
    const res = await getStatisticsRangDay({
      dpId: '8',
      devId: deviceId,
      startDay: yesterday,
      endDay: today,
      type: 'avg',
      auto: AUTO_FILL_TYPE.FILL_ZERO,
    });
    return res;
  };

  useEffect(() => {
    console.log('hhaha');
    Promise.all([getvisit(), getTime()]).then(([visit, time]) => {
      console.log(`🚀 ~ visit:`, visit, time);

      const visitValue = Object.values(visit || {});

      const timeValue = Object.values(time || {});

      setList([
        {
          title: Strings.getLang('todayCatToiletTime'),
          value: +visitValue[1] || 0,
          unit: Strings.getLang('times'),
          campare: +visitValue[1] - Number(visitValue[0]),
        },
        {
          title: Strings.getLang('todayCatAvaSec'),
          value: +timeValue[1] || 0,
          unit: Strings.getLang('Sec'),
          campare: +timeValue[1] - Number(timeValue[0]),
        },
      ]);
    });
  }, []);

  return (
    <View
      className={styles.infoContainer}
      onClick={() => {
        props?.onClick?.();
      }}
    >
      <View className={styles.infoTitle}>
        <Image src={res.cat} className={styles.cat} />
        <Text className={styles.catText}>{Strings.getLang('todayCatToiletData')}</Text>
      </View>
      <View className={styles.divider} />
      <View className={styles.infoContent}>
        {list.map(item => (
          <View className={styles.infoItem} key={item.title}>
            <View className={styles.infoItemTitle}>
              <Text>{item.title}</Text>
            </View>
            <View className={styles.infoItemValue}>
              <Text className={styles.infoItemValueText}>{item.value}</Text>
              <Text className={styles.infoItemValueUnit}>{item.unit}</Text>
            </View>
            <View className={styles.campare}>
              <Text className={styles.campareText}>{Strings.getLang('compared')}</Text>
              <Text className={styles.campareValue}>
                {item.campare}
                {item.unit}
              </Text>
            </View>
          </View>
        ))}
      </View>
    </View>
  );
});
